<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>sudoku 数独游戏</title>

    <link href="/css/games/sudoku.css" rel="stylesheet" type="text/css"/>
</head>
<body>

    <div style="width: 1024px; margin: 30px auto 0px;">

        <div id="title">
            数独游戏
        </div>

        <div id="sudoku">
            <div>
                <div id="ranking">

                    <div><p>排 名</p>

                        <p>
                            <span>大柜子</span>
                            <span>003:22</span>
                        </p>
                        <p>
                            <span>神聪</span>
                            <span>007:11</span>
                        </p>
                        <p>
                            <span>波神</span>
                            <span>009:30</span>
                        </p>
                    </div>

                    <div id="rule">
                        <p>游戏规则</p>
                        <p class="message">1.每一行、每一列、每一个粗线宫（3*3）内的数字均含1-9，不重复</p>
                        <p class="message">2.难度选择后,请点击下一局开始新的难度</p>
                        <p class="message">3.重置：可以清除所有已经填入的数字重新开始游戏</p>
                        <p class="message">4.输入模式，可以直接从键盘输入数字；按钮模式，只需要点击相应方块就能循环选取数字</p>
                    </div>

                </div>

                <table>

                    <tr th:each="row, stat1 : ${sudoku.sudoku}">

                        <th:block th:each="col, stat2 : ${row}">

                            <td
                                    th:style="${stat2.count%3==0 ? 'border-right: gray 1px dashed;' : ''}
                                    + ${stat1.count%3==0 ? 'border-bottom: gray 1px dashed;' : ''}
                                    + ${stat2.count%3==1 ? 'border-left: gray 1px dashed;' : ''}
                                    + ${stat1.count%3==1 ? 'border-top: gray 1px dashed;' : ''}">
                                <input type="text" maxlength="1" th:value="${col == 0 ? '' : col}"
                                       th:attr="readonly=${col > 0}, row=${stat1.count}, col=${stat2.count}"
                                       th:class="${col == 0 ? 'input' : ''}" title="input"/></td>

                        </th:block>

                    </tr>

                </table>

                <div id="flag">

                    <div>
                        <p>当前难度：
                            <span th:text="${sudoku.difficulty == 0 ? '菜鸟' : (sudoku.difficulty == 1 ? '初级'
                                : (sudoku.difficulty == 2 ? '中级' : (sudoku.difficulty == 3 ? '高级' : '骨灰级')))}">
                                初级</span>
                        </p>
                    </div>

                    <div>
                        <p>等级选择</p>
                        <p>
                            <button class="difficulty" value="0" th:disabled="${sudoku.difficulty == 0 ? true : false}">菜鸟</button>
                            <button class="difficulty" value="1" th:disabled="${sudoku.difficulty == 1 ? true : false}">初级</button>
                        </p>
                        <p>
                            <button class="difficulty" value="2" th:disabled="${sudoku.difficulty == 2 ? true : false}">中级</button>
                            <button class="difficulty" value="3" th:disabled="${sudoku.difficulty == 3 ? true : false}">高级</button>
                        </p>
                        <p>
                            <button class="difficulty" value="4" th:disabled="${sudoku.difficulty == 4 ? true : false}">骨灰级</button>
                        </p>
                    </div>

                    <div id="timer">

                        <p>计时器</p>

                        <p><input id="time" type="text" value="00:00 000" readonly="readonly" title="timer"/></p>

                    </div>

                </div>
            </div>
        </div>

        <div id="button">

            <div>
                <button id="submit">完 成</button>
                <button id="reset">重 置</button>
                <button id="next">下一局</button>
                <button id="model">按钮模式</button>
            </div>

        </div>

    </div>

    <!--dependence-->
    <script th:src="@{/js/dependency/jquery-3.3.1.js}" type="text/javascript"></script>

    <script th:src="@{/js/util/data-util.js}" type="text/javascript"></script>
    <script th:src="@{/js/util/timer.js}" type="text/javascript"></script>

    <!--The current page-->
    <script th:src="@{/js/games/sudoku.js}" type="text/javascript"></script>

    <script th:inline="javascript">

        Sudoku.init([[${sudoku.sudoku}]], [[${sudoku.difficulty}]]);

    </script>

</body>
</html>